<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>点名</title>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="container">
        <h1 class="text-center">点名</h1>
        <form action="/attendance/check" method="post">

            <div class="form-group form-group-sm">
                <label>班级</label>
                <select class="form-control" name="rcClass.id" >
                    <%--<option>-- 选择班级 --</option>--%>
                </select>
            </div>
            <div class="form-group form-group-sm">
                <label>学院</label>
                <input class="form-control" name="college" readonly type="text">
            </div>
            <div class="form-group form-group-sm">
                <label>教师</label>
                <input class="form-control" name="teacherName" readonly type="text">
            </div>
            <div class="form-group form-group-sm">
                <label>应到人数</label>
                <input class="form-control" name="studentNum" readonly type="text">
            </div>
            <div class="form-group form-group-sm">
                <label>缺勤人数</label>
                <input class="form-control" name="absencePersonNum" type="text" value="0">
            </div>
            <div class="form-group form-group-sm">
                <label>实到人数</label>
                <input class="form-control" name="attendancePersonNum" readonly type="text">
            </div>

            <div class="form-group form-group-sm">
                <label>点名人</label>
                <select class="form-control" name="rcUser.id" >
                </select>
            </div>
            <div class="form-group form-group-sm">
                <label>备注</label>
                <textarea class="form-control" name="remark" placeholder="填写缺勤学生的姓名(使用,分割)"></textarea>
            </div>
            <button class="btn btn-primary">提交</button>
        </form>
    </div>
    <script>
        var classList = []; //使用全局变量缓存班级列表
        $(function () {
           //获取班级信息并显示
            $.get(
                "/class/list",
                function(data) {
                    classList = data;//将查询到的班级列表缓存到全局变量中
                    for (var i = 0; i < data.length; i++) {
                        var option = $("<option></option>");
                        option.val(data[i].id);
                        option.text(data[i].college + " - " + data[i].className);
                        $("select[name='rcClass.id']").append(option);
                    }

                    //使用程序模拟修改了班级
                    $("select[name='rcClass.id']").change();
                }
            );
            //当重新选择了点名班级时，动态的修改学院，班级名称，教师，应到人数
            $("select[name='rcClass.id']").change(function () {
               var classId = $(this).val();//从下拉框中获取value，实际上就是班级ID
                for (var i in classList) {
                    if (classId == classList[i].id) {//说明找到了这个班级信息
                        $("[name=college]").val(classList[i].college);
                        $("[name=teacherName]").val(classList[i].teacherName);
                        $("[name=studentNum]").val(classList[i].studentNum);
                        //默认缺勤人数为0，所以默认的出勤数=学生总人数
                        $("[name=attendancePersonNum]").val(classList[i].studentNum);

                        break;
                    }
                }
            });

            //给缺勤人数框绑定 keyPress事件，当修改缺勤人数时自动计算 出勤人数 c = 学生数 a - 缺勤人数 b
            $("[name=absencePersonNum]").on('keyup', function () {
                var a = $("[name=studentNum]").val();//学生数
                var b = $(this).val();//缺勤人数
                var c = a - b;//计算出勤人数
                $("[name=attendancePersonNum]").val(c);//动态显示出勤人数
            });

           //获取点名人信息并显示
            $.get(
                "/user/list",
                function(data) {
                    for (var i = 0; i < data.length; i++) {
                        var option = $("<option></option>");
                        option.val(data[i].id);
                        option.text(data[i].name);
                        $("select[name='rcUser.id']").append(option);
                    }
                }
            );
        });

    </script>
</body>
</html>
